<template>
  <div>
    <el-button type="primary" @click="drawer = true">添加</el-button>
    <div class="fex1" v-if="bol1">
      <div class="cen">
        <div class="wp">
          <div>
            <p><span>*</span>收货人姓名：</p>
            <p><span>*</span>所在地区：</p>
            <p><span>*</span>详细地址：</p>
            <p><span>*</span>联系电话：</p>
            <p><span>*</span>备注：</p>
          </div>
          <div>
            <p><input class="i1" type="text" v-model="name" /></p>
            <p>
              <el-select v-model="value1" class="m-2" @change="bb">
                <el-option v-for="item in shen" :key="item" :label="item" :value="item" />
              </el-select>
              <el-select v-model="value2" class="m-2" @change="bb">
                <el-option
                  v-for="item in shi[shen.indexOf(value1)]"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select v-model="value3" class="m-2" @change="bb">
                <el-option
                  v-for="item in xian[shen.indexOf(value1)][
                    [shi[shen.indexOf(value1)].indexOf(value2)]
                  ]"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </p>
            <p><input class="i2" type="text" v-model="address" /></p>
            <p
              ><input class="i3" type="text" v-model="phone" @input="cc" /> 或固定电话：<input
                class="i4"
                type="text"
                v-model="tel1"
                @input="cc" />-<input class="i5" type="text" v-model="tel2" @input="cc"
            /></p>
            <p><input class="i1" type="text" v-model="tips" /></p>
            <p><input class="i6" type="checkbox" v-model="bol" @click="aa" />设置为常用地址</p>
            <div>
              <el-button type="warning" @click="add">保存</el-button>
              <el-button type="info" @click="bol1 = false">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1>地址管理</h1>
    <table width="100%" border="1">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>地址</th>
        <th>详细地址</th>
        <th>电话</th>
        <th>备注</th>
        <th>默认地址</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in data" :key="item.id">
        <td>{{ index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.area }}</td>
        <td>{{ item.address }}</td>
        <td>{{ item.tel }}</td>
        <td>{{ item.tips }}</td>
        <td>
          <span class="yel" v-if="item.bol == 0" @click="setMo(item.id)">设置为默认地址</span>
        </td>
        <td>
          <button @click="xx(item.id, index)">修改</button>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="'60%'">
      <div class="wp">
        <div>
          <p><span>*</span>收货人姓名：</p>
          <p><span>*</span>所在地区：</p>
          <p><span>*</span>详细地址：</p>
          <p><span>*</span>联系电话：</p>
          <p><span>*</span>备注：</p>
        </div>
        <div>
          <p><input class="i1" type="text" v-model="name" /></p>
          <p>
            <el-select v-model="value1" class="m-2" @change="bb">
              <el-option v-for="item in shen" :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-model="value2" class="m-2" @change="bb">
              <el-option
                v-for="item in shi[shen.indexOf(value1)]"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-select v-model="value3" class="m-2" @change="bb">
              <el-option
                v-for="item in xian[shen.indexOf(value1)][
                  [shi[shen.indexOf(value1)].indexOf(value2)]
                ]"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </p>
          <p><input class="i2" type="text" v-model="address" /></p>
          <p
            ><input class="i3" type="text" v-model="phone" @input="cc" /> 或固定电话：<input
              class="i4"
              type="text"
              v-model="tel1"
              @input="cc" />-<input class="i5" type="text" v-model="tel2" @input="cc"
          /></p>
          <p><input class="i1" type="text" v-model="tips" /></p>
          <p><input class="i6" type="checkbox" v-model="bol" @click="aa" />设置为常用地址</p>
          <div>
            <el-button type="warning" @click="add1">保存</el-button>
            <el-button type="info" @click="drawer = false">取消</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
const drawer = ref(false)
let data = ref([])
let bol1 = ref(false)
let name = ref('')
let area = ref('')
let address = ref('')
let tel = ref('')
let tips = ref('')
let ad = ref(0)
let id = ref(0)
let x = ref(0)
let bol = ref(false)
let phone = ref('')
let tel1 = ref('')
let tel2 = ref('')
let value1 = ref('河南省')
let value2 = ref('郑州市')
let value3 = ref('二七区')
let shen = ref(['河南省', '河北省'])
let shi = ref([
  ['郑州市', '新乡市', '信仰市'],
  ['保定市', '涿州市', '石家庄']
])
let xian = ref([
  [
    ['二七区', '高新区', '中原区'],
    ['获嘉县', '辉县', '新乡县'],
    ['固始县', '罗山县', '潢川县']
  ],
  [
    ['保定1区', '保定2区', '保定3区'],
    ['涿州1县', '涿州2县', '涿州3县'],
    ['石家庄1县', '石家庄2县', '石家庄3县']
  ]
])
let getAddress = () => {
  axios.get('/api/getAddress').then((res) => {
    // console.log(res.data)
    data.value = res.data
    console.log(data)
  })
}
let del = (a) => {
  axios.post('/api/del', { id: a }).then((res) => {
    console.log(res)
    getAddress()
  })
}

let setMo = (id) => {
  console.log(id)
  axios.post('/api/edit', { id, bol: 1 }).then((res) => {
    console.log(res)
    getAddress()
  })
}

let xx = (a, b) => {
  bol1.value = true
  id.value = a
  console.log(a, data.value)
  phone.value = data.value[b].tel
  name.value = data.value[b].name
  address.value = data.value[b].address
  tips.value = data.value[b].tips
  // console.log(address.value)
  bol.value = data.value[b].bol == 1 ? true : false
}

let aa = () => {
  ad.value = bol.value ? 0 : 1
  console.log(ad.value)
}
let bb = () => {
  area.value = value1.value + value2.value + value3.value
}
let cc = () => {
  tel.value = phone.value ? phone.value : tel1.value + tel2.value
  console.log(tel.value)
}
let add = () => {
  aa()
  bb()
  cc()
  axios
    .post('/api/saveAddress', {
      name: name.value,
      area: area.value,
      addres: address.value,
      tel: tel.value,
      tips: tips.value,
      ad: bol.value ? 1 : 0,
      id: id.value
    })
    .then((res) => {
      console.log(res.data)
      getAddress()
    })
  bol1.value = false
  getAddress()
  phone.value = ''
  name.value = ''
  address.value = ''
  bol.value = false
  tips.value = ''
}

let add1 = () => {
  aa()
  bb()
  cc()
  axios
    .post('/api/add', {
      name: name.value,
      area: area.value,
      addres: address.value,
      tel: tel.value,
      tips: tips.value,
      ad: bol.value ? 1 : 0
    })
    .then((res) => {
      console.log(res.data)
    })
  getAddress()
  bol1.value = false
  phone.value = ''
  name.value = ''
  address.value = ''
  bol.value = false
  tips.value = ''
}

onMounted(() => {
  getAddress()
})
</script>

<style lang="scss" scoped>
td {
  text-align: center;
  span {
    cursor: pointer;
  }
}
.fex1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  .cen {
    width: 700px;
    height: 600px;
    background: #fff;
  }
}
h3 {
  font-size: 18px;
  color: #252525;
  height: 60px;
  border-bottom: 1px #ccc solid;
  line-height: 60px;
  font-weight: normal;
  padding-left: 20px;
}
.wp {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
}
p {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  span {
    color: #f00;
  }
}
input {
  height: 33px;
  padding-left: 10px;
}
input[type='checkbox'] {
  height: 15px;
  border-radius: 50%;
}
.el-button {
  width: 150px;
  height: 50px;
}
.i1 {
  width: 330px;
}
.i2 {
  width: 460px;
}
.i3 {
  width: 150px;
}
.i4 {
  width: 50px;
}
.el-select {
  width: 140px;
  margin-right: 10px;
  border: 1px #999 solid;
}
</style>
